const  path=require('path')

/* 设置默认显示index.html页面 */
const  HtmlWebpackPlugin=require('html-webpack-plugin')
const  htmlPlugin=new  HtmlWebpackPlugin({
    template:'./src/index.html',  //配置根路径 要显示的文件
    filename:'index.html'   //当显示根路径或者根路径下的index.html就显示上面配置的文件路径
})

/* 
识别.vue文件的配置
*/
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();

module.exports={
    mode:'development',//设置默认是开发版本
    entry:path.join(__dirname,'./src/index.js'), //设置webpack默认要打包的js文件
    output:{
        path:path.join(__dirname,'./dist'),  //设置导报后文件放到dist目录下
        filename:'bundle.js' //设置打包后的js文件名 ===之前默认叫main.js
    },
    plugins:[htmlPlugin,vuePlugin],  //将 实例对象暴露出去

    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader','postcss-loader']} , //使用loader 处理css文件
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader'],
                
            },
            {
                test:/\.scss$/,
                use:['style-loader','css-loader','sass-loader']
            },
            {
                test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                //limit用来设置字节数，只有小于limit值的图片，才会转换
                //为base64图片
                use:"url-loader?limit=16940"
            },
            {
                test:/\.js$/,
                use:"babel-loader",
                //exclude为排除项，意思是不要处理node_modules中的js文件
                exclude:/node_modules/
            },
            { 
                test:/\.vue$/,
                loader:"vue-loader",
                
            }
        ]
    }
}